<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Mobile theme visual tests</title>
		<link rel="stylesheet" href="./../../../dist/themes/default/style.min.css">
		<link rel="stylesheet" href="./../../../dist/themes/default-dark/style.min.css">
		<style>
			.tree {
				border: 1px solid black;
				padding: 10px;
				width: 300px;
				margin: 20px;
				float: left;
				min-height: 200px;
			}
		</style>
	</head>
	<body style="background:white;">
		<div class="tree" id="tree">
			<ul>
				<li>Node 01
					<ul>
						<li>Node</li>
						<li>Node</li>
					</ul>
				</li>
				<li>Node 02</li>
				<li data-jstree='{"opened" : true}'>Node 03
					<ul>
						<li>Node</li>
						<li>Node</li>
					</ul>
				</li>
				<li>Node 04</li>
				<li>Node 05</li>
			</ul>
		</div>
		<div class="tree" id="full">
			<ul>
				<li data-jstree='{ "selected" : true, "type" : "file" }'>full</li>
				<li>asdf</li>
			</ul>
		</div>
		<div class="tree" id="dark">
			<ul>
				<li data-jstree='{ "selected" : true, "type" : "file"}'>full</li>
				<li>asdf</li>
			</ul>
		</div>
		<script src="./../../../dist/libs/jquery.js"></script>
		<script src="./../../../dist/jstree.min.js"></script>
		<script>
			$.jstree.defaults.core.themes.responsive = true;
			$('#tree').jstree();
			$('#full').jstree({
				plugins: ["checkbox", "sort", "types", "wholerow"],
				"types": {
					"file": {
						"icon": "jstree-file"
					}
				}
			});
			$('#dark').jstree({
				plugins: ["checkbox", "sort", "types", "wholerow"],
				"core": {
					"themes": {
						"name": "default-dark"
					}
				},
				"types": {
					"file": {
						"icon": "jstree-file"
					}
				}
			});
		</script>
	</body>
</html>